<template>
  <div class="my-project-container">
    <q-list dense>
      <q-expansion-item
        expand-separator
        label="样式"
      >
        <q-separator/>
        <div class="bg-teal-1">
          <ComponentBasicItem
            :detail="selectedComponent"
            @update-data="refreshInfo"
          />
        </div>
      </q-expansion-item>
      <q-expansion-item
        expand-separator
        label="属性"
      >
        <q-separator/>
        <div class="bg-teal-1">
          <ComponentPropsItem
            :list-arr="selectedComponent.propsItem"
            :item-option-arr="optionTypeTbl"
            :data-type-arr = "propsDataTypeList"
            :form-type-arr="propsFormTypeList"
            @update-list="configProperty"
          />
        </div>
      </q-expansion-item>
      <q-expansion-item
        expand-separator
        label="数据"
      >
        <div class="bg-teal-1">
          <ComponentDataItem/>
        </div>
      </q-expansion-item>
      <q-expansion-item
        expand-separator
        label="动效"
      >
        <div class="bg-teal-1">
          <ComponentMotionItem/>
        </div>
      </q-expansion-item>
      <q-expansion-item
        expand-separator
        label="事件"
      >
        <div class="bg-teal-1">
          <ComponentEventItem />
        </div>
      </q-expansion-item>
    </q-list>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
import { useEditorStore } from 'stores/editorStore';
import { storeToRefs } from 'pinia';
import { isObjectEmpty } from 'src/util/utils.js'

const ComponentMotionItem = defineAsyncComponent(() => import('components/property/ComponentMotionItem.vue'))
const ComponentBasicItem = defineAsyncComponent(() => import('components/property/ComponentBasicItem.vue'));
const ComponentPropsItem = defineAsyncComponent(() => import('components/property/ComponentPropsItem.vue'));
const ComponentDataItem = defineAsyncComponent(() => import('components/property/ComponentDataItem.vue'));
const ComponentEventItem = defineAsyncComponent(() => import('components/property/ComponentEventItem.vue'))
import { CBorder, CPropsItemVO } from 'stores/editorModels';
import { useUivCatalogTbl } from 'src/hook/editor/useUivCatalogTbl';
import { uivCatalogType } from 'src/util/UivBaseConst';
import { useSelectBoxOption } from 'src/hook/editor/useSelectBoxOption';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';


export default defineComponent({
  name: 'ComponentInfo',
  components: {
    ComponentBasicItem,
    ComponentDataItem,
    ComponentPropsItem,
    ComponentMotionItem,
    ComponentEventItem
  },
  setup (props, context) {
    //*************************************************************************************
    //                                        store
    //*************************************************************************************
    const store = useEditorStore();
    const {
      components,
      componentState,
      selectedComponent
    } = storeToRefs(store);

    //*************************************************************************************
    //                                        hook
    //*************************************************************************************
    //id和label映射函数
    const {
      findCatalogId
    } = useCatalogTool();

    //目录
    const {
      lineStyleTypeList,
      propsDataTypeList,
      propsFormTypeList,
      getUivCatalog,
      removeUivCatalog
    } = useUivCatalogTbl();

    //tabs选项卡
    const tabValue = ref('page-props');
    let eventItemList = ref([
      {
        id: 1,
        typeId: 3,
        operationId: 2,
        userId: 1,
        url: '',
        msg: '',
        sortCode: ''
      }
    ]);

    //*************************************************************************************
    //                                    tabs选项卡---ComponentBasicItem
    //*************************************************************************************
    const refreshInfo = (param: any) => {
      if (selectedComponent.value) {
        selectedComponent.value.position.x = param.position.x;
        selectedComponent.value.position.y = param.position.y;
        selectedComponent.value.position.w = param.position.w;
        selectedComponent.value.position.h = param.position.h;
        selectedComponent.value.shape.backgroundColor = param.shape.backgroundColor;
        selectedComponent.value.shape.opacity = param.shape.opacity;
        selectedComponent.value.shape.zIndex = param.shape.zIndex;
        selectedComponent.value.shape.transform = param.shape.transform;
        selectedComponent.value.shape.visible = param.shape.visible;
      }
    }

    //*************************************************************************************
    //                                    tabs选项卡---BorderProperty
    //*************************************************************************************
    const refreshBorder = (border: CBorder) => {
      if (selectedComponent.value) {
        selectedComponent.value.border.color = border.color;
        selectedComponent.value.border.line = border.line;
        selectedComponent.value.border.width = border.width;
        selectedComponent.value.border.radius = border.radius;
      }
    }


    //*************************************************************************************
    //                                    tabs选项卡---ComponentPropsItem
    //*************************************************************************************
    //关于下拉列表项option管理
    const {
      optionTypeTbl,
      addSelectBoxOptionTbl,
      generateSelectBoxOptionTbl,
      releaseSelectBoxOptionTbl
    } = useSelectBoxOption();

    //更新特殊属性
    const configProperty = (param: CPropsItemVO[]) => {
      if (selectedComponent.value?.propsItem) {
        for (let i = 0; i < param.length; i++) {
          selectedComponent.value.propsItem[i].id = param[i].id;
          selectedComponent.value.propsItem[i].label = param[i].label;
          selectedComponent.value.propsItem[i].value = param[i].value;
          selectedComponent.value.propsItem[i].dataTypeId = findCatalogId(propsDataTypeList.value, param[i].dataType);
          selectedComponent.value.propsItem[i].formTypeId = findCatalogId(propsFormTypeList.value, param[i].formType);
          selectedComponent.value.propsItem[i].optionId = 0;
        }
      }
    }

    //增加数据节点
    const addNewDataItem = () => {
      selectedComponent.value?.dataItem.push({
        id: 0,
        nodeLabel: '变量名',
        nodeValue: '',
        variableLabel: '变量ID',
        variableValue: 0
      });
    }

    //删除节点
    const removeDataItem = () => {
      selectedComponent.value?.dataItem.pop();
    }

    //*************************************************************************************
    //                                    动效--ComponentMotionItem
    //*************************************************************************************

    //初始化
    const init = () => {
      getUivCatalog(uivCatalogType.LINE_TYPE_CODE);
      updateSelectedProps();
    }

    //更新属性
    const updateSelectedProps = () => {
      //释放掉变化前值
      releaseSelectBoxOptionTbl();

      //特殊属性值
      if (selectedComponent.value) {
        selectedComponent.value?.propsItem?.forEach((item) => {
          if ((item.optionId !== null) && (item.optionId > 0)) {
            addSelectBoxOptionTbl(item.optionId);
          }
        });

        //获取option数据
        generateSelectBoxOptionTbl();
      }
    }

    // 组件加载
    onMounted(() => {
      init();
      getUivCatalog(uivCatalogType.LINE_TYPE_CODE);
      getUivCatalog(uivCatalogType.PROPS_DATA_TYPE_CODE);
      getUivCatalog(uivCatalogType.PROPS_FORM_TYPE_CODE);
    });

    //组件下载
    onUnmounted(() => {
      removeUivCatalog(uivCatalogType.LINE_TYPE_CODE);
      removeUivCatalog(uivCatalogType.PROPS_DATA_TYPE_CODE);
      removeUivCatalog(uivCatalogType.PROPS_FORM_TYPE_CODE);
    });

    return {
      store,
      components,
      componentState,
      selectedComponent,

      lineStyleTypeList,
      propsDataTypeList,
      propsFormTypeList,
      tabValue,
      optionTypeTbl,
      eventItemList,

      isObjectEmpty,
      refreshInfo,
      refreshBorder,
      configProperty,

      addNewDataItem,
      removeDataItem
    };
  }
});
</script>

<style lang="scss" scoped>
.my-project-container {
  padding: 0px;
  overflow-x: hidden;
  overflow-y: auto;

  .my-data {
    padding: 5px;
  }
}
</style>
